import Vue from 'vue'
import Component from 'vue-class-component'
import './productStyle.css'
import Platform from '@/supports/platform'

@Component
export default class ProductDetailsClass extends Vue {
  showSize = false
  currentSize = ''
  productId = ''
  product = {}
  sizes = []
  defaultSize = {}
  productDesces = []
  productImgs = []
  slots = []
  type =''

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 46
  }

  activated () {
    this.productImgs = []
    this.productDesces = []
    this.defaultSize = {}
    this.sizes = []
    this.type = this.$route.params.type
    this.productId = this.$route.params.productId
    this.getDetail()
  }

  async getDetail () {
    let url = '/api/v1/product/'

    if (this.type && this.type.length > 0 && this.type === 'store') {
      url = '/buyer/v1/product/'
    }
    try {
      const response = await this.$axios.post(url + this.productId, {})
      if (response.status === 0) {
        this.product = response.data
        if (this.product.skus) {
          let sku = this.product.skus[0]
          if (sku.xsizes) {
            this.getSizes(sku.xsizes)
            this.sizes = sku.xsizes
            let size = sku.xsizes[0]
            this.defaultSize = size
            if (this.type && this.type.length > 0 && this.type === 'store') {
              this.productImgs = this.product.imageUrls
            } else {
              this.productImgs = size.skuImages
            }
            this.productDesces = size.skuDesc
          }
        }
      }
    } catch (e) {
      console.log(e)
    }
  }

  getSizes (sizeSku) {
    let sizes = []
    for (let obj of sizeSku) {
      if (obj.size) {
        sizes.push(obj.size)
      }
    }
    this.slots = [{values: sizes}]
    console.log(this.slots)
  }

  get caculateHeight() {
    return String(this.wrapperHeight)
  }

  createProductImgs() {
    if (!this.productImgs || this.productImgs.length <= 0) {
      return
    }
    const item = this.productImgs.map((img) => {
      return <mt-swipe-item><img src={img + '?x-oss-process=image/resize,m_pad,h_750,quality,q_80'}/></mt-swipe-item>
    })
    return item
  }

  onValuesChange(picker, values) {
    this.currentSize = values
    if (values[0] > values[1]) {
      picker.setSlotValue(1, values[0])
    }
    // 选中尺码SKU
    for (var i = 0; i < this.sizes.length; i++) {
      let obj = this.sizes[i]
      if (obj.size == values) {
        this.defaultSize = obj
        console.log('size', this.defaultSize)
        return
      }
    }
  }

  // 选择尺码
  handlerShowSize() {
    this.showSize = true
  }

  handlerCloseSize() {
    this.showSize = false
  }

  handlerProductShare () {
    this.$router.push({name: 'shareDetail', params: {productId: this.productId, type: this.type, skuId: this.defaultSize.productSkuId}})
  }

  handleBuy () {
    this.product.productSkuId = this.defaultSize.productSkuId
    Platform.buyNow([this.product])
  }

  handleCall() {
    Platform.callPhone('4008877993')
  }

  createDesc () {
    if (!this.productDesces || this.productDesces.length < 0) {
      return
    }
    const item = this.productDesces.map(value => {
      return <p>{value}</p>
    })
    return item
  }

  render() {
    return (
      <div class="content">
        <mt-header class='header' fixed style="background:none">
          <mt-button onClick={() => {
            this.$router.go(-1)
          }} icon="" slot="left">
            <icon name='backIcon' scale='2'/>
          </mt-button>
        </mt-header>

        <div class="pageTopBottom" style={'height:' + this.caculateHeight + 'px; padding-top:0; background:#fff'}>
          <mt-swipe auto={0}>
            {this.createProductImgs()}
          </mt-swipe>

          <div class="product-title">
            <h2 class="designerName">{this.product.designerName}</h2>
            <h3 class="productName">{this.product.productName}</h3>
            <p class="product_price"><b>{this.defaultSize.currencyLogo}{this.defaultSize.showPrice}</b> <span class="red">{this.defaultSize.labelText}</span></p>
            <div class="productSize" onClick={this.handlerShowSize}><span>{this.defaultSize.size}</span> <i
              class="iconfont icon-zhankai"></i></div>
          </div>

          <div class="product-block">
            <div class="product-blockTitle">商品信息</div>
            <div class="product-info">
              {this.createDesc()}
            </div>
          </div>

          <div class="product-contact">

            <p onClick={this.handleCall}>
              <h2><i class="iconfont icon-dianhuakefu"></i> 电话客服</h2>
              <h3>9:00 - 18:00(工作日)</h3>
            </p>
          </div>
        </div>
        <div class="product-bottom-btn">
          <input onClick={this.handlerProductShare} type="button" value="分享商品"/>
          <input onClick={this.handleBuy} v-show={this.product.productStatus === 1} type="button" class="btn-bg-black" value="立即购买"/>
        </div>

        <div class="popup-mask" v-show={this.showSize} onClick={this.handlerCloseSize}>
          <div class="product-size-pop">
            <mt-picker slots={this.slots} onChange={this.onValuesChange} visibleItemCount={3}></mt-picker>
          </div>
        </div>
      </div>
    )
  }
}
